<template>
  <div 
    v-loading="loading"
    class="home-container" 
    ref="container"
    @while="handleWheel"
  >
    <ul 
      class="carousel-container"
      :style="{
        marginTop,
      }"  
      @transitionend="handleTransitionEnd"
    >
      <li 
        v-for="item in data" 
        :key="item.id"
      >
        <Carouselitem :carousel="item" />
      </li>
    </ul>
    <div 
      v-show="index>0" 
      @click="switchTo(index-1)" 
      class="icon icon-up"
    >
      <Icon type="shangjiantou" />
    </div>
    <div 
      v-show="index<data.length-1" 
      @click="switchTo(index+1)" 
      class="icon icon-down"
    >
      <Icon type="xiajiantou" />
    </div>
    <ul class="indicator">
      <li 
        @click="switchTo(i)" 
        :class="{active:index===i}" 
        v-for="(item,i) in data" 
        :key="item.id"
      ></li>
    </ul>
    <!-- <Loading v-if="isLoading" /> -->
  </div>
</template>

<script>
import {mapState} from "vuex";
import Carouselitem from "./Carouselitem.vue";
import Icon from "@/components/Icon";
// import Loading from "@/components/Loading";
export default {
  components:{
    Carouselitem,
    Icon,
    // Loading,
  },
  data(){
    return{
      index:0,//显示的是第一张轮播图
      containerHeight:0,//容器的高度（页面高度）
      switching:false,//是否正在翻页
    };
  },
  mounted(){
    console.log(this);
    this.containerHeight = this.$refs.container.clientHeight;
    window.addEventListener("resize",this.handleResize);
  },
  computed:{
    marginTop(){
       return -this.index * this.containerHeight+"px";
    },
    ...mapState("banner",["loading","data"]),
  },
  destroyed(){
    window.removeEventListener("resize",this.handleResize);
  },
  created(){
    this.$store.dispatch("banner/fetchBanner");
  },
  methods:{
    // 切换轮播图
    switchTo(i){
      this.index = i;
    },
    // 注册滚轮事件
    handleWheel(e){
      if(this.switching){
        return;
      }
      if(e.deltaY<-5&&this.index>0){
        this.switching=true;
        this.index--;
      }else if(e.deltaY>5&&this.index<this.data.length-1){
        this.switching=true;
        this.index++;
      };
    },
    handleTransitionEnd(){
      // 轮播结束时触发
      this.switching=false;
    },
    handleResize(){
      this.containerHeight = this.$refs.container.clientHeight;
    },
  },
}; 
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
@import "~@/styles/var.less";
@import "~@/styles/global.less";

.home-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.icon{
  .self-center();
  cursor: pointer;
  @gap:35px;
  color: @gray;
  &.icon-up{
    top: @gap;
    animation: jump-up 2s infinite;
  }
  &.icon-down{
    top: auto;
    bottom: @gap;
    animation: jump-down 2s infinite;
  }
  @keyframes jump-up {
    0%{
      transform: translate(-50%,10px);
    }
    50%{
      transform: translate(-50%,-10px);
    }
    100%{
      transform: translate(-50%,10px);
    }
  }
  @keyframes jump-down {
    0%{
      transform: translate(-50%,-10px);
    }
    50%{
      transform: translate(-50%,10px);
    }
    100%{
      transform: translate(-50%,-10px);
    }
  }
}
.iconfont-container{
  font-size: 30px;
}
.carousel-container{
  width: 100%;
  height: 100%;
  transition: 500ms;
  li{
    width: 100%;
    height: 100%;
  }
}
.indicator{
  .self-center();
  transform: translateY(-50%);
  left: auto;
  right: 20px;
  li{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #333;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #fff;
    box-sizing: border-box;
    transition: .5s;
    &.active{
      background-color: #fff;
    }
  }
}
</style>